import React, {Component} from 'react';
import './News_list.css';
import {Button, Modal, List, Table, Form, Input, Radio} from "antd";

/**蚂蚁创建通知弹出层参数 **start**/
const FormItem = Form.Item;
/**蚂蚁创建通知弹出层参数 **end**/

/** 蚂蚁表格默认数据  **start**/
const {Column} = Table;
// 表格中的行数据
// {key+1}表示行数
// title=标题
// news_level=新闻等级
// effective_time=生效时间
// failure_time=失效时间
// publish_time=发布时间
// state=状态
const tableData = [
    {
        title: '水泥模板1',
        news_level: '重要',
        content: 'DOM对象，是root的上一层节点。类似于html中的document对象。注意：在使用上下文节点时，要与路径配合好',
        effective_time: '2017/7/28 14:25',
        failure_time: '2020/2/11 08:00',
        publish_time: '2017/7/28 14:25',
        state: '显示中',
    },
    {
        key: '1',
        title: '水泥模板2',
        news_level: '重要',
        content: 'XPath中，查找同一个路径下的某个节点，IE是从0开始，DOM3是从1开始,dom3独有的功能放弃，为了保证跨浏览器',
        effective_time: '2017/7/28 14:25',
        failure_time: '2020/2/11 08:00',
        publish_time: '2017/7/28 14:25',
        state: '显示中',
    },
    {
        title: '水泥模板3',
        news_level: '重要',
        content: '只获取单一节点与节点列表即可，基本可以完成所有操作',
        effective_time: '2017/7/28 14:25',
        failure_time: '2020/2/11 08:00',
        publish_time: '2017/7/28 14:25',
        state: '显示中',
    },
    {
        title: '水泥模板4',
        news_level: '重要',
        content: '作为一个Android程序猿，工作4年，我毫不犹豫的在期望薪资上写了10～15K（西安）。',
        effective_time: '2017/7/28 14:25',
        failure_time: '2020/2/11 08:00',
        publish_time: '2017/7/28 14:25',
        state: '显示中',
    },
    {
        title: '水泥模板5',
        news_level: '重要',
        content : '在朋友都上班早起的时候，我悠悠然的睡去，在朋友满身疲惫的下班回来休息的时候，我又悠悠然的起来洗漱，吃饭。',
        effective_time: '2017/7/28 14:25',
        failure_time: '2020/2/11 08:00',
        publish_time: '2017/7/28 14:25',
        state: '显示中',
    },
    {
        title: '水泥模板6',
        news_level: '重要',
        content: '偶尔会刷刷Boss等招聘APP，有面试了约好时间去面试，没有面试就投简历，撩Boss。其他时间睡觉，玩手机，看技术博客或者书籍（怕忘了怎么敲代码）。',
        effective_time: '2017/7/28 14:25',
        failure_time: '2020/2/11 08:00',
        publish_time: '2017/7/28 14:25',
        state: '显示中',
    },
    {
        title: '水泥模板7',
        news_level: '重要',
        content: '工作四年，薪资涨幅成6-7-8-9 式涨幅。按理说4年少说也挣了36W，还不算其他收入（外包私活）。但是我却一分存款都没有，信用卡是爆的，负债还有近5W。',
        effective_time: '2017/7/28 14:25',
        failure_time: '2020/2/11 08:00',
        publish_time: '2017/7/28 14:25',
        state: '显示中',
    },
];
/** 蚂蚁表格参数  **end**/

export default class News_list extends Component {
    constructor(props) {
        super(props);
        this.state = {
            choose_num: this.props.choose,
            // 蚂蚁创建表单弹出层
            visible: false,
            //提示框数据
            resData: [],
            // 当前页面
            pagination: {pageSize: 4},
            // 蚂蚁表格参数
            tableData: tableData,
        }
    }

    /** 蚂蚁创建表单弹出层函数 **start**/
    createFormModel = () => {
        this.setState({visible: true});
    };
    handleCancelCreate = () => {
        this.setState({visible: false});
    };
    handleCreate = () => {
        const form = this.formRef.props.form;
        form.validateFields((err, values) => {
            if (err) {
                return;
            }

            console.log('Received values of form: ', values);
            form.resetFields();
            this.setState({visible: false});
        });
    };
    saveFormRef = (formRef) => {
        this.formRef = formRef;
    };
    /** 蚂蚁创建表单弹出层函数 **end**/

    /** 蚂蚁弹出表单函数 **start**/
    showModal = (i) => {
        this.setState({
            visible: true,
            resData: tableData[i],
        });
    };
    // 删除行
    deleteModal = (i) => {
        const tableData = this.state.tableData;
        tableData.splice(i, 1);
        this.setState({
            tableData: tableData,
        })
    }

    /** 蚂蚁弹出表单函数 **end**/
    handleOk = () => {
        this.setState({
            visible: false
        })
    }
    handleCancel = () => {
        this.setState({
            visible: false
        })
    }

    render() {
        const columns = [
            {
                title: '标题',
                dataIndex: 'title'
            },
            {
                title: '新闻等级',
                dataIndex: 'news_level'
            },
            {
                title: '生效时间',
                dataIndex: 'effective_time'
            },
            {
                title: '失效时间',
                dataIndex: 'failure_time'
            },
            {
                title: '状态',
                dataIndex: 'state'
            },
            {
                title: '操作',
                dataIndex: 'CZ'
            },
        ]
        const datas = [];
        const data = this.state.tableData;
        const len = data.length;
        for(let i = 0; i < len; i++){
            datas.push({
                title: data[i].title,
                news_level: data[i].news_level,
                effective_time: data[i].effective_time,
                failure_time: data[i].failure_time,
                state: data[i].state,
                CZ: <div>
                <Button type="primary" style={{marginLeft: 5, marginRight: 5}}
                        onClick={() => this.showModal(i)}>查看</Button>
                <Button type="primary" style={{marginLeft: 5, marginRight: 5}}
                        onClick={() => this.deleteModal(i)}>删除</Button>
            </div>
            })
        }
        return (
            <div id="news_list">
                <div className="col-md-12 col-sm-12">
                    <h2>新闻列表</h2>
                    <h4>您可以创建新闻，新闻会按照创建时间和优先级进行显示。</h4>
                    <Table columns = {columns} dataSource = {datas} 
                        pagination = {{
                            showSizeChanger : true,
                            defaultCurrent : 1,
                            defaultPageSize: 4,
                            total: len,
                            pageSizeOptions : ['4', '10', '30', '50'],//页数选择
                        }}
                    />
                    <Modal
                        title="新闻详情"
                        visible={this.state.visible}
                        onOk={this.handleOk}
                        onCancel={this.handleCancel}
                        >
                        <div style = {{textAlign:'left'}} className = "modal">
                            <label >标题:{this.state.resData.title}</label>
                            <p style = {{marginTop:'15px'}}><label >新闻内容:{this.state.resData.content}</label></p>
                            <p style = {{marginTop:'15px'}}><label >新闻等级:{this.state.resData.news_level}</label></p>
                            <p><label >生效时间:{this.state.resData.effective_time}</label></p>
                            <p><label >失效时间:{this.state.resData.failure_time}</label></p>
                            <p><label >状态:{this.state.resData.state}</label></p>
                        </div>
                    </Modal>
                    {/* <Button
                        type="primary"
                        className="create_news"
                        onClick={() => {
                            this.createFormModel()
                        }}
                    >新建新闻
                    </Button> */}
                </div>
            </div>
        )
    }
}
